<script setup lang="ts">
import {ref} from "vue";
import MergeList from "./components/MergeList.vue";
import {theme} from "ant-design-vue";
import Nav from './components/Nav.vue'
const baseUrl=ref(localStorage.getItem('baseUrl'))
const token=ref('')
const setted=ref(localStorage.getItem('baseUrl'))
const settedToken=ref(localStorage.getItem('token'))
import zhCN from 'ant-design-vue/es/locale/zh_CN';
const locale = ref(zhCN);
const setBaseUrl=()=>{
  localStorage.setItem('baseUrl',baseUrl.value||'')
  if(baseUrl.value){
    if(!baseUrl.value.endsWith('/')){
      baseUrl.value=baseUrl+'/'
    }
  }
  setted.value=baseUrl.value
}
const setToken=()=>{
  localStorage.setItem('token',token.value || '')
  settedToken.value=token.value
}
const getToken=()=>{
  window.open(`${baseUrl.value}-/profile/personal_access_tokens`)
}

const activeKey=ref('merge')
</script>

<template>
  <a-config-provider
      :locale="locale"
      :theme="{
      algorithm: theme.darkAlgorithm,
    }">
  <div class="dark-model" style="height: 100vh;color: white">
    <div v-if="!setted">
      <p style="text-align: center">尚未初始化此组件，请先输入gitlab地址：</p>
      <a-input v-model:value="baseUrl"></a-input>
      <a-button block type="primary" style="margin-top: 10px" @click="setBaseUrl">确定</a-button>
    </div>
    <div  v-if="setted && !settedToken">
      <p style="text-align: center">请设置gitlabToken，请勾选全部的权限，以便应用充分调取信息：</p>
      <a-input v-model:value="token"></a-input>

      <div  style="display: flex;gap:10px;margin-top: 10px">
        <a-button type="default" @click="getToken">去获取</a-button><a-button block type="primary"  @click="setToken">设置Token</a-button>
      </div>

    </div>

    <div v-if="setted && settedToken" style="height: 362px">
      <a-tabs v-model:activeKey="activeKey" >
        <a-tab-pane key="nav" tab="快速访问"><Nav></Nav></a-tab-pane>
        <a-tab-pane key="merge" tab="合并请求"> <MergeList></MergeList></a-tab-pane>
<!--        <a-tab-pane key="2" tab="待办" force-render>待办</a-tab-pane>-->
<!--        <a-tab-pane key="3" tab="其他">其他</a-tab-pane>-->
      </a-tabs>

    </div>
  </div>
  </a-config-provider>
</template>

<style scoped>

</style>
